<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./lib/jquery.js"></script>
    <script>
        // form表单收集数据
        需要表单中的 < input > 中声明了value和name才可以获取


        submit // 表单的提交事件
        e.preventDefault(); // 阻止表单默认提交

        // 例:
        获取的表单数据需要加 name 和 value('获取的内容')
        $("form").on('submit', function (e) {
            e.preventDefault();
            // 两种快速获取表单参数的方式:
            console.log($("form").serialize());     // 字符串方式存储
            console.log($(this).serializeArray());  // 数组方式存储
        })


        // 表单中 有四种数据要注意
        1. disabled 无法获取， readonly 可以获取；
        2. file 无法获取文件域的值, 将来文件上传需要单独操作
        3. type = "hidden" 就是隐藏域，可以获取到他的值
        4. button的type属性，值如果为button，无法触动submit事件, 默认type为submit可以获取




        // 编码
        alert(encodeURIComponent('紫川'));
        // 解码
        alert(decodeURIComponent('%E7%B4%AB%E5%B7%9D'));



        // $.ajaxPrefilter() 能够拦截 $.get() $.post() $.ajax(); 而且是发送和接收都会拦截;
        $.ajaxPrefilter('公共地址') //设置在 jQruey 和 js 代码之间新建一个script
        $.ajaxPrefilter(function (option) {
            option.url = 'http://www.liulongbin.top:3006' + option.url;
        });



        // 原生get XMLHttpRequest  
        // 1.创建 xhr 实例
        let xhr = new XMLHttpRequest();
        // 2.设置请求方式和资源路径     路径和资源写在一起,中间用?隔开
        xhr.open('GET', 'http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记');
        // 3.发送请求
        xhr.send();
        // 4.接收
        xhr.onreadystatechange = function () {
            // 输出响应信息
            console.log(xhr.response);
        }


        // 原生post XMLHttpRequest
        // 1.创建 xhr 对象 
        let xhr = new XMLHttpRequest();
        // 2.设置请求方式和资源路径
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/addbook');
        // 注意1: 设置请求头 - 告诉后端发送的参数类型是什么样的;
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        // 注意2: post请求体，参数要写道send()里面;
        xhr.send('bookname=雍正王朝&author=二月河&publisher=河北人民出版社');
        // 接受响应数据 - 绑定位置，不影响接收数据的触发
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // JSON.parse()可以把JSON类型的字符串转换为对象类型
                let obj = JSON.parse(xhr.response);
                console.log(obj);
            }
        }

        // xhr对象.readyState
        代表四个阶段
        new 创建完, 返回的是 0
        open 设置完请求方式和资源路径, 返回 1
        send 是请求, 但是此时没有接收到, 所以返回的还是 1
        在 xhr.onreadystatechange 中是已经接收成功, 所以 2 3 4 都在这显示
        2 表示send一定调用了，并且已经接收到响应头
        3 示正在接收服务器返回的数据（可能已接收完毕，也可能正在接收中，取决于数据量的大小）
        4 数据接收完成

        // xhr对象.status
        响应分为五类：
        信息响应(100–199) ，
        成功响应(200–299) ，
        重定向(300–399) ，
        客户端错误(400–499)
        服务器错误(500–599) 。
        常用状态码
        200 OK - 请求成功
        400 Bad Request - 1、语义有误，当前请求无法被服务器理解。2、请求参数有误。
        401 Unauthorized - 当前请求需要用户验证。
        404 Not Found - 请求失败，请求所希望得到的资源未被在服务器上发现。
        500 Internal Server Error - 服务器遇到了不知道如何处理的情况。




    </script>



    <!-- 封装原生ajax -->
    <script>
        function myAjax(ajax) {
            // 创建原生ajax
            let xhr = new XMLHttpRequest()



            // 判断条件输出
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let obj = JSON.parse(xhr.response)
                    ajax.success(obj)
                }
            }





            // 转化data     数据形式 {a:1,b:2,c:3}   变成  a=1&b=2&c=3
            function ajaxdata(data) {
                let arr = []
                for (var n in data) {
                    // 遍历后变为  [ a=1,b=2,c=3 ]
                    arr.push(`${n}=${data[n]}`)
                }
                // 将数组拼接用&   a=1&b=2&c=3
                console.log(arr.join('&'));
                return arr.join('&')
            }
            let qs = ajaxdata(ajax.data)





            // 判断类型,设置地址和data
            if (ajax.method.toUpperCase() == 'GET') {
                xhr.open('GET', ajax.url + '?' + qs)
                xhr.send()
            } else if (ajax.method.toUpperCase() == 'POST') {
                xhr.open('POST', ajax.url)
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(qs)

            }
        }
    </script>
</body>

</html>